<template>
  <div class="user-management-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">用户管理</div>
      <div class="header-actions">
        <el-button type="primary" @click="addUser">新增用户</el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <el-card shadow="hover" class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.fullName" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="searchForm.department" placeholder="请选择部门" clearable>
            <el-option label="营销部" value="marketing"></el-option>
            <el-option label="客服部" value="customer_service"></el-option>
            <el-option label="技术部" value="technology"></el-option>
            <el-option label="财务部" value="finance"></el-option>
            <el-option label="人力资源部" value="hr"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="searchForm.role" placeholder="请选择角色" clearable>
            <el-option 
              v-for="role in roleOptions" 
              :key="role.value" 
              :label="role.label" 
              :value="role.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="启用" value="active"></el-option>
            <el-option label="禁用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUsers">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户表格 -->
    <el-card shadow="hover" class="user-table-card">
      <template #header>
        <div class="card-header">
          <span>用户列表</span>
          <div class="header-actions">
            <el-button size="small" type="success" @click="exportUsers">导出</el-button>
            <el-button size="small" type="primary" @click="addUser">新增</el-button>
          </div>
        </div>
      </template>
      
      <el-table
        v-loading="loading"
        :data="userList"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="fullName" label="姓名" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="department" label="部门" width="120">
          <template #default="scope">
            {{ getDepartmentName(scope.row.department) }}
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色" width="120">
          <template #default="scope">
            <el-tag
              :type="getRoleTagType(scope.row.role)"
              effect="plain"
              size="small"
            >
              {{ getRoleName(scope.row.role) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastLogin" label="最近登录" width="180">
          <template #default="scope">
            <el-tooltip
              :content="formatDateTime(scope.row.lastLogin)"
              placement="top"
              :disabled="!scope.row.lastLogin || scope.row.lastLogin === '-'"
            >
              <span>{{ formatRelativeTime(scope.row.lastLogin) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="'active'"
              :inactive-value="'disabled'"
              :disabled="scope.row.username === 'admin'"
              @change="(val) => handleStatusChange(val, scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="small" type="success" @click="assignRole(scope.row)">分配角色</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="deleteUser(scope.row)"
              :disabled="scope.row.username === 'admin'"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 用户表单对话框 -->
    <el-dialog 
      v-model="userDialogVisible" 
      :title="dialogType === 'add' ? '新增用户' : '编辑用户'"
      width="600px"
      destroy-on-close
      @closed="resetForm"
    >
      <el-form 
        ref="userFormRef" 
        :model="userForm" 
        :rules="userRules" 
        label-width="100px"
        :validate-on-rule-change="false"
      >
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model.trim="userForm.username" 
            placeholder="请输入用户名" 
            :disabled="dialogType === 'edit'"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="fullName">
          <el-input v-model.trim="userForm.fullName" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="userForm.email" placeholder="请输入邮箱" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="dialogType === 'add'">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" v-if="dialogType === 'add'">
          <el-input v-model="userForm.confirmPassword" type="password" placeholder="请确认密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select v-model="userForm.department" placeholder="请选择部门" style="width: 100%" clearable>
            <el-option label="营销部" value="marketing"></el-option>
            <el-option label="客服部" value="customer_service"></el-option>
            <el-option label="技术部" value="technology"></el-option>
            <el-option label="财务部" value="finance"></el-option>
            <el-option label="人力资源部" value="hr"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色" style="width: 100%" clearable>
            <el-option 
              v-for="role in roleOptions" 
              :key="role.value" 
              :label="role.label" 
              :value="role.value"
              :disabled="false"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="userForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="userForm.remark" type="textarea" rows="3" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUserForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 角色分配对话框 -->
    <el-dialog 
      v-model="roleDialogVisible" 
      title="分配角色"
      width="500px"
      destroy-on-close
    >
      <el-form :model="roleAssignForm" label-width="100px">
        <el-form-item label="用户">
          <el-input v-model="roleAssignForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="roleAssignForm.fullName" disabled></el-input>
        </el-form-item>
        <el-form-item label="当前角色">
          <el-tag
            :type="getRoleTagType(roleAssignForm.currentRole)"
            effect="plain"
          >
            {{ getRoleName(roleAssignForm.currentRole) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="新角色" prop="newRole">
          <el-select 
            v-model="roleAssignForm.newRole" 
            placeholder="请选择新角色" 
            style="width: 100%"
          >
            <el-option 
              v-for="role in roleOptions" 
              :key="role.value" 
              :label="role.label" 
              :value="role.value"
              :disabled="role.value === 'admin' && roleAssignForm.username !== 'admin'"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据范围" prop="dataScope">
          <el-select 
            v-model="roleAssignForm.dataScope" 
            placeholder="请选择数据范围" 
            style="width: 100%"
          >
            <el-option label="全部数据" value="all"></el-option>
            <el-option label="部门数据" value="department"></el-option>
            <el-option label="个人数据" value="self"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAssignRole">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getUsers as getUserList,
  createUser,
  updateUser,
  deleteUser as apiDeleteUser,
  activateUser,
  deactivateUser,
  getRoles
} from '@/api/modules/system'
import { getUserInfo } from '@/utils/auth'
import { formatDateTime, formatRelativeTime } from '@/utils/format'

// 加载状态
const loading = ref(false)

// 搜索表单
const searchForm = reactive({
  username: '',
  fullName: '',
  department: '',
  role: '',
  status: ''
})

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 用户列表
const userList = ref([])

// 角色选项
const roleOptions = ref([
  { label: '管理员', value: 'admin' },
  { label: '数据分析师', value: 'analyst' },
  { label: '客户经理', value: 'manager' },
  { label: '营销专员', value: 'marketing' },
  { label: '部门主管', value: 'dept_head' },
  { label: '高管', value: 'executive' }
])

// 对话框控制
const userDialogVisible = ref(false)
const roleDialogVisible = ref(false)
const dialogType = ref('add')

// 用户表单
const userForm = reactive({
  id: '',
  username: '',
  fullName: '',
  email: '',
  password: '',
  confirmPassword: '',
  department: '',
  role: '',
  status: 'active',
  remark: ''
})

// 表单引用
const userFormRef = ref(null)

// 表单验证规则
const userRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'submit' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'submit' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含字母、数字和下划线', trigger: 'submit' }
  ],
  fullName: [
    { required: true, message: '请输入姓名', trigger: 'submit' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'submit' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'submit' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'submit' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'submit' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'submit' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'submit' },
    {
      validator: (rule, value, callback) => {
        if (value !== userForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'submit'
    }
  ],
  department: [
    { required: true, message: '请选择部门', trigger: 'submit' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'submit' }
  ]
}

// 角色分配表单
const roleAssignForm = reactive({
  userId: '',
  username: '',
  fullName: '',
  currentRole: '',
  newRole: '',
  dataScope: 'department'
})

// 搜索用户
const searchUsers = () => {
  pagination.currentPage = 1
  fetchUserList()
}

// 重置搜索条件
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  fetchUserList()
}

// 获取用户列表
const fetchUserList = async () => {
  loading.value = true
  
  try {
    const params = {
      page: pagination.currentPage,
      page_size: pagination.pageSize,
      search: searchForm.username || searchForm.fullName || '',
      role: searchForm.role || '',
      department: searchForm.department || '',
      is_active: searchForm.status ? (searchForm.status === 'active' ? 'true' : 'false') : ''
    }
    
    const response = await getUserList(params)
    console.log('用户列表响应:', response) // 调试日志
    
    // DRF分页响应通常包含results字段
    if (response && response.results) {
      // 直接使用DRF分页响应
      const responseData = response.results;
      
      userList.value = responseData.map(user => ({
        id: user.id,
        username: user.username,
        fullName: user.full_name || '',
        email: user.email,
        department: user.department || '',
        role: user.role,
        lastLogin: user.last_login || '-',
        status: user.is_active ? 'active' : 'disabled',
        remark: user.remark || ''
      }))
      
      // DRF分页格式使用count字段
      pagination.total = response.count || 0
    } 
    // 处理自定义包装的响应
    else if (response.success && response.data) {
      // 直接返回成功格式 {success: true, data: [...]}
      userList.value = response.data.map(user => ({
        id: user.id,
        username: user.username,
        fullName: user.full_name || '',
        email: user.email,
        department: user.department || '',
        role: user.role,
        lastLogin: user.last_login || '-',
        status: user.is_active ? 'active' : 'disabled',
        remark: user.remark || ''
      }))
      
      pagination.total = response.count || 0
    } 
    // 处理嵌套响应格式
    else if (response.data && response.data.success) {
      // 嵌套格式 {data: {success: true, data: [...]}}
      userList.value = response.data.data.map(user => ({
        id: user.id,
        username: user.username,
        fullName: user.full_name || '',
        email: user.email,
        department: user.department || '',
        role: user.role,
        lastLogin: user.last_login || '-',
        status: user.is_active ? 'active' : 'disabled',
        remark: user.remark || ''
      }))
      
      pagination.total = response.data.count || 0
    } else {
      // 处理错误响应
      const errorMsg = (response.error?.message || response.data?.error?.message || '获取用户列表失败')
      ElMessage.error(errorMsg)
      console.error('获取用户列表错误数据:', response)
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (page) => {
  pagination.currentPage = page
  fetchUserList()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  fetchUserList()
}

// 获取部门名称
const getDepartmentName = (departmentCode) => {
  const departments = {
    'marketing': '营销部',
    'customer_service': '客服部',
    'technology': '技术部',
    'finance': '财务部',
    'hr': '人力资源部'
  }
  return departments[departmentCode] || departmentCode
}

// 获取角色名称
const getRoleName = (roleCode) => {
  const roles = {
    'admin': '管理员',
    'analyst': '数据分析师',
    'manager': '客户经理',
    'marketing': '营销专员',
    'dept_head': '部门主管',
    'executive': '高管'
  }
  return roles[roleCode] || roleCode
}

// 获取角色标签类型
const getRoleTagType = (roleCode) => {
  const types = {
    'admin': 'danger',
    'analyst': 'warning',
    'manager': 'success',
    'marketing': 'info',
    'dept_head': 'primary',
    'executive': 'danger'
  }
  return types[roleCode] || ''
}

// 处理状态变化
const handleStatusChange = async (value, user) => {
  if (user.username === 'admin' && value === 'disabled') {
    ElMessage.error('管理员账号不能被禁用')
    user.status = 'active'
    return
  }
  
  try {
    let response
    if (value === 'active') {
      response = await activateUser(user.id)
    } else {
      response = await deactivateUser(user.id)
    }

    console.log('状态更新响应:', response)

    // 兼容处理响应格式
    if (response.success) {
      const statusText = value === 'active' ? '启用' : '禁用'

      ElMessage({
        message: `已${statusText}用户"${user.username}"`,
        type: 'success'
      })
    } else {
      // 恢复原状态
      user.status = value === 'active' ? 'disabled' : 'active'
      const errorMsg = response.error || '更新用户状态失败'
      ElMessage.error(errorMsg)
    }
  } catch (error) {
    // 恢复原状态
    user.status = value === 'active' ? 'disabled' : 'active'
    console.error('更新用户状态失败:', error)
    ElMessage.error('更新用户状态失败，请检查网络连接')
  }
}

// 新增用户
const addUser = () => {
  dialogType.value = 'add'
  
  // 重置表单
  Object.keys(userForm).forEach(key => {
    userForm[key] = key === 'status' ? 'active' : ''
  })
  
  userDialogVisible.value = true
}

// 编辑用户
const editUser = (user) => {
  dialogType.value = 'edit'
  
  // 填充表单
  userForm.id = user.id
  userForm.username = user.username
  userForm.fullName = user.fullName
  userForm.email = user.email
  userForm.department = user.department
  userForm.role = user.role
  userForm.status = user.status
  userForm.remark = user.remark || ''
  
  userDialogVisible.value = true
}

// 提交用户表单
const submitUserForm = async () => {
  // 使用表单验证
  if (!userFormRef.value) return
  
  try {
    await userFormRef.value.validate()
    
    loading.value = true
    
    if (dialogType.value === 'add') {
      const userData = {
        username: userForm.username,
        full_name: userForm.fullName,
        email: userForm.email,
        department: userForm.department,
        role: userForm.role,
        is_active: userForm.status === 'active',
        password: userForm.password,
        password_confirm: userForm.confirmPassword // 添加确认密码字段
      }
      
      console.log('创建用户请求数据:', JSON.stringify(userData))
      
      const response = await createUser(userData)
      console.log('创建用户响应:', response)
      
      // 兼容处理响应格式
      if (response.success) {
        ElMessage({
          message: '用户创建成功',
          type: 'success'
        })
      } else if (response.data && response.data.success) {
        ElMessage({
          message: '用户创建成功',
          type: 'success'
        })
      } else {
        let errorMsg = ''
        if (response.error?.details) {
          // 处理详细验证错误
          const details = response.error.details
          errorMsg = Object.keys(details)
            .map(key => {
              if (Array.isArray(details[key])) {
                return `${key}: ${details[key].join(', ')}`
              }
              return `${key}: ${details[key]}`
            })
            .join('\n')
        } else {
          errorMsg = response.error?.message || (response.data ? response.data.error?.message : null) || '用户创建失败'
        }
        ElMessage.error(errorMsg)
        loading.value = false
        return
      }
    } else {
      const userData = {
        full_name: userForm.fullName,
        email: userForm.email,
        department: userForm.department,
        role: userForm.role,
        is_active: userForm.status === 'active',
        remark: userForm.remark
      }
      
      const response = await updateUser(userForm.id, userData)
      console.log('更新用户响应:', response)
      
      // 兼容处理响应格式
      if (response.success) {
        ElMessage({
          message: '用户更新成功',
          type: 'success'
        })
      } else if (response.data && response.data.success) {
        ElMessage({
          message: '用户更新成功',
          type: 'success'
        })
      } else {
        const errorMsg = response.error?.message || (response.data ? response.data.error?.message : null) || '用户更新失败'
        ElMessage.error(errorMsg)
        loading.value = false
        return
      }
    }
    
    // 关闭对话框
    userDialogVisible.value = false
    
    // 刷新列表
    fetchUserList()
  } catch (error) {
    console.error('表单验证或操作失败:', error)
    if (error instanceof Error) {
      ElMessage.error(error.message || '操作失败，请检查表单填写')
    } else {
      ElMessage.error('操作失败，请检查网络连接')
    }
  } finally {
    loading.value = false
  }
}

// 删除用户
const deleteUser = (user) => {
  // 允许管理员删除其他管理员，但不能删除自己
  if (user.username === 'admin') {
    ElMessage.error('系统超级管理员账号不能被删除')
    return
  }
  
  const currentUserInfo = getUserInfo()
  if (user.id === currentUserInfo?.id) {
    ElMessage.error('不能删除当前登录账号')
    return
  }
  
  ElMessageBox.confirm(`确定要删除用户"${user.username}"吗？此操作不可恢复！`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'danger'
  }).then(async () => {
    try {
      const response = await apiDeleteUser(user.id)
      console.log('删除用户响应:', response)
      
      // 兼容处理响应格式
      if ((response.success) || (response.data && response.data.success)) {
        ElMessage({
          message: `已删除用户"${user.username}"`,
          type: 'success'
        })
        
        // 刷新列表
        fetchUserList()
      } else {
        const errorMsg = response.error?.message || (response.data ? response.data.error?.message : null) || '删除用户失败'
        ElMessage.error(errorMsg)
      }
    } catch (error) {
      console.error('删除用户失败:', error)
      ElMessage.error('删除用户失败，请检查网络连接')
    }
  }).catch(() => {})
}

// 分配角色
const assignRole = (user) => {
  // 填充表单
  roleAssignForm.userId = user.id
  roleAssignForm.username = user.username
  roleAssignForm.fullName = user.fullName
  roleAssignForm.currentRole = user.role
  roleAssignForm.newRole = user.role
  
  // 根据当前角色设置数据范围
  if (user.role === 'admin' || user.role === 'analyst' || user.role === 'executive') {
    roleAssignForm.dataScope = 'all'
  } else if (user.role === 'manager' || user.role === 'marketing' || user.role === 'dept_head') {
    roleAssignForm.dataScope = 'department'
  } else {
    roleAssignForm.dataScope = 'self'
  }
  
  roleDialogVisible.value = true
}

// 确认分配角色
const confirmAssignRole = async () => {
  if (!roleAssignForm.newRole) {
    ElMessage.error('请选择角色')
    return
  }
  
  loading.value = true
  
  try {
    const response = await updateUser(roleAssignForm.userId, {
      role: roleAssignForm.newRole
    })

    console.log('角色分配响应:', response)

    // 兼容处理响应格式
    if (response.success || response.id) {
      ElMessage({
        message: `已将用户"${roleAssignForm.username}"的角色更新为"${getRoleName(roleAssignForm.newRole)}"`,
        type: 'success'
      })

      // 关闭对话框
      roleDialogVisible.value = false

      // 刷新列表
      fetchUserList()
    } else {
      const errorMsg = response.error || '分配角色失败'
      ElMessage.error(errorMsg)
    }
  } catch (error) {
    console.error('分配角色失败:', error)
    ElMessage.error('分配角色失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

// 导出用户
const exportUsers = () => {
  ElMessage({
    message: '用户数据导出功能将在后续版本中实现',
    type: 'info'
  })
}

// 重置表单
const resetForm = () => {
  if (userFormRef.value) {
    userFormRef.value.resetFields()
    // 清空表单数据，避免保留上次的输入
    Object.keys(userForm).forEach(key => {
      if (key === 'status') {
        userForm[key] = 'active'
      } else {
        userForm[key] = ''
      }
    })
  }
}

// 加载角色选项
const loadRoles = async () => {
  try {
    const response = await getRoles()
    if (response.success) {
      roleOptions.value = response.data
    }
  } catch (error) {
    console.error('加载角色失败:', error)
  }
}

// 生命周期钩子
onMounted(() => {
  fetchUserList()
  loadRoles()
})
</script>

<style lang="scss" scoped>
.user-management-container {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
    
    .page-title {
      font-size: 22px;
      font-weight: bold;
    }
  }
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .user-table-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-actions {
        display: flex;
        gap: 10px;
      }
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style> 